<template>
    <h1>双向数据绑定</h1>
    <div>
        <!-- 双向数据绑定使用v-model
        使用时，v-model绑定的数据必须是响应式的数据，否则无效
        v-model的绑定方法是：v-model="数据"
        其可以用修饰符.number，将输入框的值转为数字类型
        例如：v-model.number="数据
        例如：v-model.trim="数据" 将输入框的值去除首尾空格

        -->
        <span>姓名：</span> {{ username }}
        <input type="text" v-model="username">
        <span>密码：</span> {{ pwd }}
        <input type="password" v-model="pwd">
        <span>年龄：</span> {{ age }}
        <input type="text" v-model.number="age">

    </div>
    <div>
        <!-- v-model绑定在select（下拉菜单）时
        需要将option的value属性设置为要绑定的数据，否则无效
        例如：<option value="数据">显示内容</option>
        v-model绑定在select时，会将选中的option的value值赋值给绑定的数据
        绑定示例：
        <select v-model="数据"> 
            <option value="数据">显示内容</option>
        这样，当选择北京时，数据会被赋值为"北京市"，而不是显示内容"北京市"。
        -->
        <span>来自于: </span> {{ froms }}
        <!-- 下拉菜单要绑定在select上 -->
        <select v-model="froms">
            <option value="北京市">北京</option>
            <option value="南京市">南京</option>
            <option value="天津市">天津</option>
        </select>
    </div>
    <div>
        <!-- (重要)
      遇到复选框, v-model绑定的是布尔值，而非数组
      此时在单个复选框上使用时，会将复选框的checked属性赋值给绑定的数据
      这时数据在定义时候需要定义为布尔类型
      例如：const 数据 = ref(false)
      如果在绑定单个复选框时候，绑定的数据定义为了const 数据 = ref([])，则会报错

      例如：<input type="checkbox" v-model="数据" value="值">
      如果要绑定多个复选框，需要将v-model绑定的数据设置为数组类型
      例如：<input type="checkbox" v-model="数据" value="值">
           <input type="checkbox" v-model="数据" value="值">
        此时数据在定义时候需要定义为数组类型
        例如：const 数据 = ref([])

      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
       <input type="checkbox" v-model="test" >
<p>测试的单个绑定数据的值</p>{{ test }}
       <br>
        <span>爱好: </span> {{ hobby }}
        <input type="checkbox" v-model="hobby" value="逛街">逛街
        <input type="checkbox" v-model="hobby" value="学习">学习
        <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <!-- textarea标签的作用是：多行文本输入框，可以输入多行文本
     当使用v-model绑定时，会将输入框的内容赋值给绑定的数据
     例如：<textarea v-model="数据"></textarea>
     如果要去除首尾空格，可以使用.trim修饰符
     .lazy修饰符的作用是：在change事件触发时，才将输入框的内容赋值给绑定的数据

     input标签用于单行文本输入
     例如：<input type="text" v-model="数据">
     如果要去除首尾空格，可以使用.trim修饰符
     其type属性用于指定输入框的类型，例如：text、password等
      -->
    <div>
        <span>自我介绍</span> {{ intro }}
        <textarea v-model.lazy="intro"></textarea><br><br>
        <span>个人名言：</span>{{ str }}
        <input type="text" v-model.trim="str">
    </div>
</template>

<script setup>

import { ref } from 'vue'
const username = ref('测试用户')
const pwd = ref('123456')
const age = ref(18)
const froms = ref("南京市")
const intro = ref("我是一名java开发工程师，热爱编程和解决问题。")
    // v-model
    //* .number   以parseFloat转成数字类型
    //* .trim          去除首尾空白字符
//.lazy           在change时触发而非inupt时
    const str = ref("")
    const test = ref(false)
    const hobby = ref([])


</script>

<style scoped> 
</style>